<template>
  <div>
    <p class="text-title">推送记录</p>
    <div class="log-box">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="推送中" name="1"></el-tab-pane>
        <el-tab-pane label="推送成功" name="2"></el-tab-pane>
        <el-tab-pane label="推送失败" name="3"></el-tab-pane>
        <ul class="list-box">
          <li class="list-item" v-for="(item, index) in 3" :key="index">
            <p class="text-title">批次号：32098101202307310002</p>
            <p class="f-between">
            <p>
              <span class="text-label">应推送数量：</span>
              <span class="text-blue">22821</span>
            </p>
            <p>
              <span class="text-label">已推送数量：</span>
              <span class="text-orange">22821</span>
            </p>
            </p>
            <p class="text-gray">开始时间 刚刚</p>
          </li>
          <li class="list-item" >
            <el-button text type="primary" @click="handleLinkto">查看更多
              <el-icon>
                <icon-right theme="outline" size="24" />
              </el-icon>
            </el-button>
          </li>
        </ul>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
const activeName = ref('1')

const handleLinkto =()=> {
  // router.push('/datacenter/business/policyData/index?activeName=2')
}

</script>

<style scoped lang="scss">
.text-blue {
  color: #0052D9
}

.text-title {
  font-family: "Microsoft YaHei Bold";
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  color: #000000e6;
}

.log-box {
  background-color: #fff;
  border-radius: 19px;
  margin-top: 10px;

  .list-box {
    .list-item {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      padding: 0 20px;
      line-height: 30px;



      .text-label {
        color: #000000e6;
      }

      .text-value {
        font-weight: bold
      }
    }
  }
}
</style>
